<template>
  <div>
    <el-row type="flex" class="row-bg" justify="center">
      <el-col :span="7"
        ><div class="grid-content type">
          姓名：<el-input size="small" maxlength="10" v-model="alter.fullName"></el-input></div
      ></el-col>
      <el-col :span="6"></el-col>
      <el-col :span="4">
        <el-upload
          class="upload-demo"
          :action="upaction + '/matters/upload'"
          :headers="headers"
          :on-success="success"
          multiple
          :limit="1"
          :on-exceed="handleExceed"
          :file-list="fileList"
        >
          <img :src="alter.avatar" alt="" style="width: 120px; height: 140px" />
        </el-upload>
      </el-col>
    </el-row>
    <el-form ref="alter" :model="alter" label-width="120px">
      <el-form-item label="电话：">
        <el-input size="small" maxlength="11" v-model="alter.phone"></el-input>
      </el-form-item>
      <el-form-item label="密码：">
        <el-input size="small" maxlength="10" v-model="alter.password"></el-input>
      </el-form-item>
      <el-form-item label="所在区域" v-show="childmessage.roleId == '2' || childmessage.roleId == '6'">
        <el-select v-model="alter.unitGridId" placeholder="请选择" size="small">
          <el-option v-for="item in option" :key="item.id" :label="item.name" :value="item.zoningCode"> </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="海康通讯号码：">
        <el-input size="small" maxlength="10" v-model="alter.haikangNumber"></el-input>
      </el-form-item>
    </el-form>
    <div class="confirm">
      <el-button @click="confirm" type="primary" size="small">提交</el-button>
    </div>
  </div>
</template>

<script>
import Seats from '@/api/Seats'
import env from '@/utils/env'
import * as api from '@/api/admin'
export default {
  props: {
    childmessage: {
      type: Object,
      default() {
        return {}
      },
    },
    positionmesssage: {
      type: Array,
      default() {
        return []
      },
    },
  },
  data() {
    return {
      value: '',
      alter: {
        avatar: '',
        fullName: '',
        idCard: '',
        oldPassword: '',
        password: '',
        unitGridId: '',
        phone: '',
        userId: '',
        username: '',
      },
      option: [],
      upaction:
        process.env.NODE_ENV === 'production'
          ? env.prod.baseUrl
          : process.env.NODE_ENV === 'test'
          ? env.test.baseUrl
          : env.dev.baseUrl,
      headers: { Authorization: '' },
      fileList: [],
    }
  },
  created() {
    this.alter = this.childmessage
    this.alter.password = ''
    this.alter.unitGridId = String(this.childmessage.unitGridId ?? '')
    delete this.alter.account
    let token = localStorage.getItem('Authorization')
    this.headers = { Authorization: token }
    this.getCidadeList()
  },
  watch: {
    deep: true,
    childmessage(val) {
      this.alter = val
      this.alter.password = ''
      delete this.alter.account
      this.alter.unitGridId = String(this.childmessage.unitGridId ?? '')
    },
  },
  methods: {
    confirm() {
      Seats.superget(this.alter).then(res => {
        if (res.code == 200) {
          this.$message({
            message: '修改完成！',
            type: 'success',
          })
          this.$parent.handleClose()
        }
      })
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制上传1个文件`)
    },
    success(res) {
      if (res.code == 200) {
        this.alter.avatar = res.data.minIoUrl
        this.$message({
          message: '上传成功!',
          type: 'success',
        })
      }
    },
    getCidadeList() {
      api.getCidadeList({ pid: 991713 }).then(res => {
        this.option = res.data
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.el-row {
  font-size: 14px;
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.grid-content {
  white-space: nowrap;
}
.el-col {
  border-radius: 4px;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
}
.el-form {
  width: 379px;
  margin-left: 128px;
}
.confirm {
  width: 100px;
  height: 100px;
  margin: 0 auto;
}
</style>
